<template>
	<view class="container">
		<u-form :model="form" label-width='140' ref="uForm">
			<u-form-item label="URL链接" prop="sourceUrl">
				<u-input v-model="form.sourceUrl" placeholder="请输入要转换的URL" type="textarea" clearable focus border />
			</u-form-item>
			<u-form-item label="URL描述" prop="urlDesc">
				<u-input v-model="form.urlDesc" placeholder="建议填写" type="textarea" clearable border />
			</u-form-item>
		</u-form>

		<view class="btn-group">
			<u-button type="primary" @click="handleConvert" :disabled="!form.sourceUrl">转换</u-button>
			<u-button type="info" @click="handleClear" style="margin-top: 20rpx;">重置</u-button>
		</view>

		<view v-if="form.objectUrl" class="result-section">
			<text class="title">转换结果：</text>
			<view class="url-display">
				<text selectable>{{ form.objectUrl }}</text>
			</view>

			<view class="action-btns">
				<u-button type="info" plain @click="handleCopy" icon="file-text">复制链接</u-button>

				<u-button type="success" @click="handleTest" icon="link">测试链接</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					id: '',
					sourceUrl: '',
					objectUrl: '',
					urlDesc: '',
					createTime: ''
				}
			}
		},
		onLoad(params) {
			console.log(params);
		},
		methods: {
			handleClear(){
				this.form = {
					id: '',
					sourceUrl: '',
					objectUrl: '',
					urlDesc: '',
					createTime: ''
				}
			},
			handleConvert() {
				// 这里实现URL转换逻辑
				const timestamp = new Date().getTime()
				this.form.objectUrl = `https://www.htzh.xyz/#/pages/index/skip?sourceUrl=${this.form.sourceUrl}&t=${timestamp}`
				this.$api.user.saveTrans({
					...this.form,
					createTime: this.wfy.format('yyyy-MM-dd hh:mm:ss', new Date()),
					id: this.wfy.uuid(32)
				}).then(res => {
					// 此处不需要校验code为200 请求拦截器中已判断
					this.$u.toast('保存成功！');
				});
			},
			handleCopy() {
				uni.setClipboardData({
					data: this.form.objectUrl,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						})
					}
				})
			},
			handleTest() {
				window.open(this.form.objectUrl)

			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;

		.btn-group {
			margin: 40rpx 0;
		}

		.result-section {
			margin-top: 60rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
				display: block;
			}

			.url-display {
				background-color: #f5f5f5;
				padding: 20rpx;
				border-radius: 8rpx;
				margin-bottom: 30rpx;
				word-break: break-all;
			}

			.action-btns {
				display: flex;
				justify-content: space-between;

				button {
					width: 48%;
				}
			}
		}
	}
</style>